import React,{Component} from "react";
import { View, Text, StyleSheet, StatusBar, TouchableWithoutFeedback, Image } from "react-native";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import {statusBarHeight,width} from '../../util/apdater_util';
import PropTypes from "prop-types";
import RecommendList from '../../page/community/RecommendList'
import TopicList from "../community/TopicList";
import Loading from "../../widget/Loading";
import Toast from "../../widget/Toast";

class CommunityCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render(){
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.tabBox}>
              <Text style={[styles.tab,i === this.props.activeTab?{fontSize:19,color:'#222222',fontWeight:'600'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
              {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}

class Comunity_page extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.state={
      tabList:[{
        label:'推荐',
        index:1
      },{
        label:'最新',
        index:2
      },{
        label:'话题',
        index:3
      }]
    }
  }

  onChangeTab(obj){
    console.log(obj)
    // this.setState({page:1})
  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)

  }

  render(){
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor='transparent' translucent barStyle={'dark-content'} />
        <View style={{height:statusBarHeight}}></View>
        <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
          (position) => {

          }
        } locked={false} renderTabBar={()=><CommunityCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
          <View tabLabel='Tab3' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <RecommendList type={1}></RecommendList>
            </View>
          </View>
          <View tabLabel='Tab4' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <RecommendList type={1}></RecommendList>
            </View>
          </View>
          <View tabLabel='Tab5' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <TopicList></TopicList>
            </View>
          </View>
        </ScrollableTabView>
        <Loading></Loading>
        <Toast></Toast>
      </View>
    )
  }
}
export default module=Comunity_page

const styles=StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#fff'
  },
  /**tab**/
  tabs:{
    height:44,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
  },
  tabBox:{
    height:46,
    justifyContent: 'center',
    alignItems:'center',
    paddingBottom:6
  },
  tab:{
    color: '#666666',
    fontSize: 16,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:6,
  }
})
